<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="{{url_for('static', path='/layui/echarts.min.js')}}"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body>
<div class="layui-progress" style="margin: 5px 0 15px;background:#FFFFFF"></div>
<div class="layui-form-item" style="margin:0 auto;width:300px;">
    <form action='/echarts/' method='post' name='query' style="margin:0px;display:inline">
        <font color="#ff7f50">值列表</font>
        <input type="text" name="data" required lay-verify="required" class="layui-input">
        <br>
        <input type="submit" name="submit" value="查询" class="layui-input" style="color: #1E9FFF;">
    </form>
</div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    var option;
    option = {
        title: [
            {
                text: '异常值检验',
                left: 'center'
            },
        ],
        dataset: [
            {
                source: [{{ data }}]
            },
            {
                transform: {
                    type: 'boxplot',
                    config: {itemNameFormatter: '数值'}
                }
            },
            {
                fromDatasetIndex: 1,
                fromTransformResult: 1
            }
        ],
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {},
        series: [
            {
                name: 'boxplot',
                type: 'boxplot',
                datasetIndex: 1
            },
            {
                name: 'outlier',
                type: 'scatter',
                datasetIndex: 2
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
</script>
</body>
</html>